<template>
  <div class="main">
      <div slot="header" class="clearfix">
        <span>有问题请联系我</span>
      </div>
      <div>
        <el-form :model="contactForm" label-width="80px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="contactForm.name"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="contactForm.email"></el-input>
          </el-form-item>
          <el-form-item label="消息" prop="message">
            <el-input type="textarea" v-model="contactForm.message"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitContactForm"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contactForm: {
        name: "",
        email: "",
        message: "",
      },
    };
  },
  methods: {
    submitContactForm() {
      // 处理表单提交逻辑，可以发送请求或执行其他操作
      console.log("联系表单提交:", this.contactForm);
      // 在这里你可以添加发送邮件或其他后端逻辑
      // 如果使用axios，你可以像这样发送POST请求：
      // this.$axios.post('/api/contact', this.contactForm).then(response => {
      //   console.log('成功发送请求', response);
      // }).catch(error => {
      //   console.error('请求失败', error);
      // });
    },
  },
};
</script>

<style scoped>
.clearfix{
   text-align: center;
   font-size: 20px;
   font-weight: bold;
   color: #409EFF;
   margin-bottom: 50px;
}

</style>
